<template>
	<view>
		<mescroll-uni :bottom="typeName=='voes'?150:''" ref="mescrollRef" @init="mescrollInit" top="70" @down="downCallback" :down="downOption" :up="upOption" @up="upCallback" @scroll="handleScroll">
			<!-- 云电话 -->
			<xmcVoesList v-if="typeName==='voes'" :list="recordList"></xmcVoesList>
			<!-- 语音报警 -->
			<audioList v-else-if="typeName==='audio'" :list="recordList"></audioList>
			<!-- 短信报警 -->
			<smsList v-else-if="typeName==='sms'" :list="recordList"></smsList>
		</mescroll-uni>
		<!-- 错误码提示 -->
		<error-modal :modalName="modalName" :errCode="errCode"  @hideModal="hideModal"></error-modal>
	</view>
</template>

<script>
import errorModal from "../../components/modal/error"
// import MescrollMixin from "../../components/mescroll-uni/mescroll-mixins.js"
import mescrollUni from "@/jvss/pageCloud/components/mescroll-uni/mescroll-uni.vue";
import MescrollMixin from "@/jvss/pageCloud/components/mescroll-uni/mescroll-mixins.js";
import xmcVoesList  from '../xmcVoesList/xmcVoesList'
import audioList  from '../audioList/audioList'
import smsList from '../smsList/smsList'
import { VoLTE_History }from '@/API/api.js'
export default {
	components:{ xmcVoesList,audioList,smsList,errorModal,mescrollUni },
	mixins: [MescrollMixin], // 使用mixin
	props:{
		typeName:{
			type:String,
			default:''
		},
	},
	data() {
		return {
			downOption:{
				use:false,//是否启用下拉刷新
				auto:false ,//是否在初始化完毕之后自动执行一次下拉刷新的回调
				textInOffset:this.$t('JLink.publicText.mescroll.textInOffset'),//下拉刷新
				textOutOffset:this.$t('JLink.publicText.mescroll.textOutOffset'),//释放更新
				textLoading:this.$t('JLink.publicText.mescroll.textLoading'),//加载中 ...
				textSuccess:this.$t('JLink.publicText.mescroll.textSuccess'),//加载成功
				textErr:this.$t('JLink.publicText.mescroll.textErr'),//加载失败
				onScroll:true
			},
			upOption:{
				auto:false,
				page: {
					size: 10 // 每页数据的数量
				},
				noMoreSize: 6, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				textLoading:this.$t('JLink.publicText.mescroll.textLoading'),//上拉加载中的文本
				textNoMore:this.$t('JLink.publicText.mescroll.textNoMore'),//没有更多数据的提示文本(~~小主，数据加载完毕~~)
				textColor:'#c0bebe',
				empty:{
					tip: this.$t('JLink.publicText.mescroll.empty'), // 提示
					// btnText: '去看看'
				},
				onScroll:true
			},
			recordList: [], //列表数据
			token:'',
			dateValue:[],//选择的日期
			modalName:'',
			errCode:'',
			alramTypes:null//报警类型枚举值
		}
	},
	methods: {
		// 初始化数据
		handleLoad(token,dates,ALARMTYPE) {
			this.token = token;
			this.dateValue = dates;
			this.alramTypes = ALARMTYPE;//报警类型枚举值
			this.recordList = []// 先置空列表,显示加载进度
			this.mescroll.resetUpScroll() // 再刷新列表数据
			this.scrollToY(0)
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			const {num,size} = page;
			let params = {
				startTime:`${this.dateValue[0]} 00:00:00`,
				endTime:`${this.dateValue[1]} 23:59:59`,
				page:num,
				size
			}
			this.modalName ='';//模态框取消
			//联网加载数据
			VoLTE_History(this.typeName,this.token,params).then(res=>{
				const {code,data} = res;
				if(code===2000){
					let list = data.body;
					if(list.length){
						list.forEach(z=>{
							z.alarmType = z.alarmType ? this.alramTypes[z.alarmType] : '';//报警类型
							z.seconds = z.seconds ? z.seconds : 0;//通话时长
						})
					}
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endSuccess(list.length,data.total);
					//设置列表数据
					if(page.num == 1) this.recordList = []; //如果是第一页需手动制空列表
					this.recordList=this.recordList.concat(list); //追加新数据
				}else{
					this.mescroll.endSuccess(0, 0);//隐藏下拉刷新和上拉加载的状态;
					// this.recordList= [];
					this.modalName = 'errorMessage';
					this.errCode = `v-${code}`;
				}
				
			}).catch(()=>{
				//联网失败, 结束加载
				this.mescroll.endErr();
			})
		},
		// 主动触发下拉刷新
		triggerDownScroll(){
			this.mescroll.scrollTo(0, 0)
			this.mescroll.triggerDownScroll()
		},
		/* 滚动条滚到底部 */
		scrollToBottom(){
			this.mescroll.myScrollTo(9999,0)
		},
		// 滚动到指定位置,传数字 (单位px)
		scrollToY(y){
			// this.mescroll.scrollTo(y) // 过渡动画时长默认300ms
			this.mescroll.scrollTo(y, 0) // 无过渡动画
		},
		handleScroll(mescroll){
			this.$emit('scroll',mescroll)
		},
		// 关闭弹框
		hideModal(){
			this.modalName=''
		},
	}
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
